<template>
  <div id="app">
    <div class="app-header">
      <div class="logo-section">
        <svg class="logo-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
          <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
          <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
        </svg>
        <h1>P2P 下载工具</h1>
      </div>
      <div class="header-actions">
        <div class="header-stats">
          <div class="stat-item">
            <span class="stat-label">活跃任务</span>
            <span class="stat-value">{{ activeDownloads.length }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">已完成</span>
            <span class="stat-value">{{ completedDownloads.length }}</span>
          </div>
        </div>
        <button @click="showSettings = true" class="settings-btn" title="设置">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2"/>
            <path d="M19.4 15C19.1277 15.6171 19.2583 16.3378 19.73 16.82L19.79 16.88C20.1656 17.2551 20.3766 17.7642 20.3766 18.295C20.3766 18.8258 20.1656 19.3349 19.79 19.71C19.4149 20.0856 18.9058 20.2966 18.375 20.2966C17.8442 20.2966 17.3351 20.0856 16.96 19.71L16.9 19.65C16.4178 19.1783 15.6971 19.0477 15.08 19.32C14.4755 19.5791 14.0826 20.1724 14.08 20.83V21C14.08 22.1046 13.1846 23 12.08 23C10.9754 23 10.08 22.1046 10.08 21V20.91C10.0642 20.2327 9.63587 19.6339 9 19.4C8.38291 19.1277 7.66218 19.2583 7.18 19.73L7.12 19.79C6.74486 20.1656 6.23582 20.3766 5.705 20.3766C5.17418 20.3766 4.66514 20.1656 4.29 19.79C3.91445 19.4149 3.70343 18.9058 3.70343 18.375C3.70343 17.8442 3.91445 17.3351 4.29 16.96L4.35 16.9C4.82167 16.4178 4.95235 15.6971 4.68 15.08C4.42093 14.4755 3.82764 14.0826 3.17 14.08H3C1.89543 14.08 1 13.1846 1 12.08C1 10.9754 1.89543 10.08 3 10.08H3.09C3.76733 10.0642 4.36613 9.63587 4.6 9C4.87235 8.38291 4.74167 7.66218 4.27 7.18L4.21 7.12C3.83445 6.74486 3.62343 6.23582 3.62343 5.705C3.62343 5.17418 3.83445 4.66514 4.21 4.29C4.58514 3.91445 5.09418 3.70343 5.625 3.70343C6.15582 3.70343 6.66486 3.91445 7.04 4.29L7.1 4.35C7.58218 4.82167 8.30291 4.95235 8.92 4.68H9C9.60447 4.42093 9.99738 3.82764 10 3.17V3C10 1.89543 10.8954 1 12 1C13.1046 1 14 1.89543 14 3V3.09C14.0026 3.74764 14.3955 4.34093 15 4.6C15.6171 4.87235 16.3378 4.74167 16.82 4.27L16.88 4.21C17.2551 3.83445 17.7642 3.62343 18.295 3.62343C18.8258 3.62343 19.3349 3.83445 19.71 4.21C20.0856 4.58514 20.2966 5.09418 20.2966 5.625C20.2966 6.15582 20.0856 6.66486 19.71 7.04L19.65 7.1C19.1783 7.58218 19.0477 8.30291 19.32 8.92V9C19.5791 9.60447 20.1724 9.99738 20.83 10H21C22.1046 10 23 10.8954 23 12C23 13.1046 22.1046 14 21 14H20.91C20.2524 14.0026 19.6591 14.3955 19.4 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>
    </div>

    <Settings v-if="showSettings" @close="showSettings = false" />

    <div class="app-content">
      <FileUpload @use-link="handleUseLink" />
      <AddDownload ref="addDownloadRef" @add-download="handleAddDownload" />
      <DownloadList />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useDownloadStore } from './stores/downloadStore';
import FileUpload from './components/FileUpload.vue';
import AddDownload from './components/AddDownload.vue';
import DownloadList from './components/DownloadList.vue';
import Settings from './components/Settings.vue';

const downloadStore = useDownloadStore();
const addDownloadRef = ref(null);
const showSettings = ref(false);

const activeDownloads = computed(() => downloadStore.activeDownloads);
const completedDownloads = computed(() => downloadStore.completedDownloads);

const handleAddDownload = async (config) => {
  const id = downloadStore.addDownload(config);
  
  // 调用 Electron API 开始下载
  if (window.electronAPI) {
    // 确保只传递可序列化的数据
    const downloadConfig = {
      id: Number(id),
      type: config.type || 'p2p',
      url: String(config.url || ''),
      savePath: String(config.savePath || ''),
      peers: Array.isArray(config.peers) ? config.peers.map(p => String(p)) : [],
      shardCount: Number(config.shardCount || 1),
      rsConfig: config.rsConfig ? {
        dataShards: Number(config.rsConfig.dataShards),
        parityShards: Number(config.rsConfig.parityShards)
      } : null
    };
    
    const result = await window.electronAPI.startDownload(downloadConfig);
    
    if (!result.success) {
      downloadStore.setError(id, result.error);
    }
  } else {
    // 开发环境模拟
    console.warn('Electron API 不可用，这是开发环境');
    setTimeout(() => {
      downloadStore.setError(id, '请在 Electron 环境中运行应用');
    }, 1000);
  }
};

const handleUseLink = ({ link }) => {
  // 将链接传递给 AddDownload 组件
  if (addDownloadRef.value) {
    addDownloadRef.value.setDownloadLink(link);
  }
  
  // 滚动到下载区域
  setTimeout(() => {
    const element = document.querySelector('.add-download-container');
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }, 100);
};

onMounted(() => {
  // 加载设置
  downloadStore.loadSettings();
  
  if (window.electronAPI) {
    window.electronAPI.onDownloadProgress(({ id, progress }) => {
      downloadStore.updateProgress(id, progress);
    });
    
    window.electronAPI.onDownloadComplete(({ id, result }) => {
      downloadStore.setComplete(id, result);
    });
    
    window.electronAPI.onDownloadError(({ id, error }) => {
      downloadStore.setError(id, error);
    });
  }
});
</script>

<style scoped>
#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #e0e0e0;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: #00d4ff;
}

.app-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  background: linear-gradient(135deg, #00d4ff 0%, #7b2ff7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.header-stats {
  display: flex;
  gap: 2rem;
}

.settings-btn {
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  color: #a0a0a0;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #00d4ff;
  transform: rotate(90deg);
}

.settings-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.stat-label {
  font-size: 0.75rem;
  color: #a0a0a0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #00d4ff;
}

.app-content {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
}
</style>
